<template>
    <div class="common-layout">
        <NavBar />
        <div class="content">
            <h1 class="title floatY">add我</h1>
            <img src="../assets/qq.jpg" alt="QQ图片" class="square-image floatY" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
</script>

<style scoped>
.common-layout {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(120deg, #e9edf1 0%, #bdbdbd 100%);
    overflow: hidden;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 60px); /* 减去导航栏的高度 */
}

.title {
    font-family: 'STKaiti', 'KaiTi', 'FZShuTi', '宋体', serif;
    font-size: 2em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px #aaa;
}

.square-image {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

.floatY {
    display: inline-block;
    animation: floatY 2.5s ease-in-out infinite;
}

@keyframes floatY {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
</style>